<template>
  <view>
    <u-navbar
      title="我的对话"
      :is-back="false"
      back-icon-size="34"
      title-size="36"
      :border-bottom="false"
      :background="background"
      title-color="#222"
      back-icon-color="#222"
    ></u-navbar>
    <view class="">
      <scroll-view :scroll-top="scrollTop" scroll-x="true" class="scroll-Y" style="white-space: nowrap; background: #fff">
        <view class="" style="display: flex; align-items: center; background: #fff; height: 170rpx; margin-left: 36rpx">
          <view :class="current == k ? 'on1' : 'on'" v-for="(i, k) in list" :key="k" style="margin-right: 30rpx; position: relative" @tap="room(k)">
            <!-- <view class="" style="color: red;position: absolute;top: 2rpx;right: 10rpx;" v-if="i.msg_num!=0">
							<view class="" style="border-radius: 50%;width: 40rpx;height: 40rpx;background: red;font-size: 24rpx;line-height: 40rpx;color: #fff;text-align: center;">
								{{i.msg_num}}
							</view>
						</view> -->
            <view class="" style="font-size: 28rpx">
              {{ i.patient_name }}
            </view>
            <view class="" style="font-size: 24rpx" v-if="i.patient_age">{{ i.patient_gender_text }} · {{ i.patient_age }}岁</view>
            <view class="" v-else style="height: 22rpx">
              {{ ' ' }}
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <view class="">
      <u-tabs :list="lists" :is-scroll="false" :current="current1" @change="change" bg-color="#f8f8f8"></u-tabs>
    </view>
    <view class="">
      <view class="" v-if="chatlist == ''" style="font-size: 28rpx; color: #666; text-align: center; padding-top: 30rpx">您还暂未问诊消息...</view>
      <scroll-view scroll-y="true" id="box" :style="{ height: boxHeight + 'px' }" @scrolltolower="chatroom">
        <view class="" v-if="chatlist != ''">
          <view
            class=""
            style="margin: 20rpx 28rpx; background: #fff; border-radius: 20rpx"
            v-for="(i, k) in chatlist"
            :key="k"
            @tap="chat(i.doctor.doctor_id, i.user_patient.patient_id, i.order_res.order_type)"
          >
            <view class="" style="display: flex; align-items: center; padding: 28rpx; justify-content: space-between">
              <view class="" style="font-size: 24rpx; color: #666">
                {{ i.last_time }}
              </view>
              <view class="" style="text-align: right; color: #1a9eff" v-if="i.order_res">
                {{ i.order_res.order_status_text }}
              </view>
            </view>

            <view class="" style="display: flex; justify-content: space-between; padding: 0rpx 22rpx 11rpx 26rpx">
              <view class="" style="display: flex; align-items: flex-start">
                <view class="">
                  <image :src="i.doctor.doctor_avatar" mode="aspectFill" style="width: 112rpx; height: 112rpx; border-radius: 50%"></image>
                </view>
                <view class="" style="padding-left: 18rpx">
                  <view class="">
                    <text style="font-size: 30rpx; font-weight: bold">{{ i.doctor.doctor_name }}</text>
                    <text style="font-size: 26rpx; padding-left: 20rpx">{{ i.doctor.doctor_title }}</text>
                  </view>
                  <view
                    class=""
                    style="
                      font-size: 26rpx;
                      color: #666;
                      padding-top: 29rpx;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      -webkit-line-clamp: 1;
                      display: -webkit-box;
                      -webkit-box-orient: vertical;
                      width: 300rpx;
                    "
                    v-if="i.last_log && i.last_log.content"
                  >
                    {{ i.last_log.content }}
                  </view>
                </view>
              </view>
              <view class="" style="font-size: 24rpx; color: #666">
                <!-- {{i.last_time}} -->
              </view>
            </view>
            <view class="" v-if="i.msg_num != 0" style="display: flex; justify-content: flex-end; margin-right: 28rpx">
              <view class="" style="border-radius: 50%; width: 40rpx; height: 40rpx; background: red; font-size: 24rpx; line-height: 40rpx; color: #fff; text-align: center">
                {{ i.msg_num }}
              </view>
            </view>

            <view class="" style="font-size: 26rpx; text-align: right; padding-right: 19rpx; padding-bottom: 18rpx">就诊人：{{ i.user_patient.patient_name }}</view>
          </view>
        </view>
      </scroll-view>
    </view>

    <view class="" style="position: fixed; bottom: 220rpx; right: 22rpx" @tap="shopchat">
      <view class="" style="width: 136rpx; height: 136rpx; text-align: center; position: relative">
        <image src="https://wenzhen.fuerle168.com/static/shop/xx.png" mode="" style="width: 136rpx; height: 136rpx"></image>
        <view class="" style="font-size: 26rpx; position: absolute; top: 87rpx; left: 42rpx">消息</view>
        <view class="" style="width: 12rpx; height: 12rpx; border-radius: 50%; background: #e50014; position: absolute; top: 23rpx; right: 23rpx" v-if="count != 0"></view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      background: {
        background: '#FFFFFF'
      },
      scrollTop: 0,
      list: [],
      current: 0,
      lists: [
        {
          name: '我的问诊'
        },
        {
          name: '我的复诊'
        }
      ],
      current1: 0,
      page: 1,
      chatlist: [],
      boxHeight: '',
      msgs: null,
      count: null
    };
  },
  onReady() {
    this.box();
  },
  watch: {
    msgs: {
      handler(newName, oldName) {
        console.log('进不来？');
        this.chatroom(1);
      },
      deep: true
    }
  },
  methods: {
    unread() {
      this.api({
        url: '/api/news/unread',
        method: 'post'
      }).then((res) => {
        this.count = res.data.count;
      });
    },
    shopchat() {
      uni.navigateTo({
        url: '/chat/cahtxiao/cahtxiao'
      });
    },
    box() {
      const query = uni.createSelectorQuery().in(this);
      query
        .select('#box')
        .boundingClientRect((data) => {
          this.boxHeight = this.screenHeight - data.top - 50;
        })
        .exec();
    },
    change(index) {
      this.current1 = index;
      this.chatroom(1);
    },
    oss() {
      this.api({
        url: '/api/index/patientList',
        method: 'post'
      }).then((res) => {
        this.list = res.data;
        let arr = {
          patient_name: '全  部'
        };
        this.list.unshift(arr);
        if (this.list) {
          // this.chatroom(1)
        }
      });
    },
    chatroom(e) {
      if (e == 1) {
        this.page = 1;
      }
      console.log(this.list[this.current].patient_id, '-----------');
      this.api({
        url: '/api/index/consultList',
        method: 'post',
        data: {
          type: this.current1 + 1,
          patient_id: this.current == 0 ? '' : this.list[this.current].patient_id,
          page: this.page
        }
      }).then((res) => {
        if (e == 1) {
          this.chatlist = [];
        }

        this.chatlist = this.chatlist.concat(res.data);

        this.page++;
        console.log(this.chatlist, this.page, 'sdasdasd');
        this.chatlist.map((i) => {
          if (i.msg_num != 0) {
          } else {
            uni.hideTabBarRedDot({
              index: 1
            });
          }
        });
      });
    },
    room(k) {
      this.current = k;
      this.chatroom(1);
    },
    chat(e, a, type) {
      console.log(e, a, '---------=-=-=-=', type);

      uni.navigateTo({
        url: '/chat/chat/chat?id=' + e + '&patient_id=' + a + '&type=' + type
      });
    }
  },
  onLoad() {
    this.msgs = this.util.msg;
  },
  async onShow() {
    await this.oss();
    this.unread();
    this.chatroom(1);
  }
};
</script>

<style>
.on {
  padding: 21rpx 53rpx 15rpx 25rpx;
  background: #f0f0f0;
  border-radius: 20rpx;
}

page {
  background: #f8f8f8;
}

.on1 {
  padding: 21rpx 53rpx 15rpx 25rpx;

  background: linear-gradient(0deg, #1a9eff 0%, #0fb8ff 100%);
  border-radius: 20rpx;
  color: #fff;
}
</style>
